<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .pagenation-box {
            width: 100%;
            margin: 2vh 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        .page-btn-pages {
            text-align: center;
            position: relative;
            z-index: 10;
        }

        .page-btn-page {
            padding: 20px;
            cursor: pointer;
            display: inline-block;
        }

        .page-active-page,
        .page-btn-page:hover {
            color: var(--themeColor);
        }

        .btn-page-elp {
            color: black !important;
            cursor: text;
        }

        .btn-func-prev,
        .btn-func-next {
            margin-left: 20px;
            font-size: calc(30px + 0.1vw);
            cursor: pointer;
        }

        .btn-func-prev {
            transform: rotate(-180deg);
        }

        .page-btn-func .icon-youjiantou-:hover {
            transform: translateX(0);
        }

        .btn-func-prev:hover {
            transform: translateX(0) rotate(-180deg) !important;
        }

        @media screen and (max-width:768px) {
            .pagenation-box {
                padding: 0 20px;
            }

            .btn-func-prev,
            .btn-func-next {
                margin: 0;
            }

            .btn-func-prev {
                grid-area: prev;
                justify-self: flex-start;
            }

            .btn-func-next {
                grid-area: next;
                justify-self: flex-end;
            }

            .page-btn-func {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-areas: "prev next";
                align-items: center;
                z-index: 0;
            }
        }
    </style>
</head>

<body>
    <div class="pagenation-box wow fadeInUp">
        <div class="page-btn-pages">
        </div>
        <div class="page-btn-func">
        </div>
    </div>
</body>
<script src="__PUBLIC__/asset/lib/jquery_3.2.1.min.js"></script>
<script>
    let word = new URLSearchParams(location.search)?.get('word') || ''
    let cate = new URLSearchParams(location.search)?.get('cate') || ''
    let pages = '{$page}'
    let maxpage = parseInt('{$maxpage}') || null
    let type = '{$type}-index'

    $(document).ready(function () {
        if (location.pathname.includes('search')) {
            $('.pagenation-box').css('border-top', '1px solid black')
        }
        let nextBtn = '<i class="iconfont icon-youjiantou- btn-func-next"></i>'
        let prevBtn = '<i class="iconfont icon-youjiantou- btn-func-prev"></i>'
        // 分页参数
        let pageInfo = {
            page: pages || 1,
            pageSize: 10,
            maxpage: maxpage || 1,
            showPage: 3,
        }
        // 初始化配置
        function initPageFunc() {
            // $('.page-btn-func').empty();
            // if (pageInfo.page == pageInfo.maxpage) {
            //     $('.page-btn-func').append(prevBtn)
            // }
            // if (pageInfo.page !== pageInfo.maxpage && pageInfo.page == 1) {
            //     $('.page-btn-func').append(nextBtn)
            // }
            // if (pageInfo.page !== pageInfo.maxpage && pageInfo.page !== 1) {
            //     $('.page-btn-func').append(prevBtn)
            //     $('.page-btn-func').append(nextBtn)
            // }
            bindPageFunc()
        }
        // 绑定上一页下一页
        function bindPageFunc() {
            $('.icon-youjiantou-').on('click', function () {
                let page = pageInfo.page
                page -= ($(this).hasClass('btn-func-next') ? -1 : 1)
                window.location.href = window.location.origin +'/' +type + `${'-word-' + word + '-cate-' + cate + ''}-page-${page}`
                // initPageFunc()
            })
        }
        function bindPages() {
            setTimeout(() => {
                $('.page-btn-page').each(function () {
                    let id = $(this).data('id')
                    if (id == 'more') {
                        return
                    }
                    $(this).on('click', function () {
                        window.location.href = window.location.origin +'/'+ type + `${'-word-' + word + '-cate-' + cate + ''}-page-${id}`
                    })
                })
            }, 300);

        }
        // 初始化分页数量
        function initPages() {
            console.log(pageInfo);

            let pageDoms = ''

            if(pageInfo.maxpage <= 5){
                for (let i = 1; i <= pageInfo.maxpage; i++) {
                    pageDoms += `<span class="page-btn-page ${i == pageInfo.page ? 'page-active-page' : ''}" data-id="${i}">${i}</span>`
                }
            }else{
                if(pageInfo.page <= 2){ //前三
                    console.log('前三');
                    for (let i = 1; i <= 3; i++) {
                        pageDoms += `<span class="page-btn-page ${i == pageInfo.page ? 'page-active-page' : ''}" data-id="${i}">${i}</span>`
                    }
                    if(pageInfo.page > 2){
                        pageDoms += `<span class="page-btn-page" data-id="${pageInfo.page+1}">${pageInfo.page+1}</span>`
                    }
                    pageDoms += `<span class="page-btn-page btn-page-elp" data-id="more">...</span>`
                    pageDoms += `<span class="page-btn-page" data-id="${pageInfo.maxpage}">${pageInfo.maxpage}</span>`
                }else if(pageInfo.page >= pageInfo.maxpage - 1){ //后三
                    console.log('后三');
                    pageDoms += `<span class="page-btn-page" data-id="1">1</span>`
                    pageDoms += `<span class="page-btn-page btn-page-elp" data-id="more">...</span>`

                    if(pageInfo.page < pageInfo.maxpage - 2){
                        pageDoms += `<span class="page-btn-page" data-id="${pageInfo.page-1}">${pageInfo.page-1}</span>`
                    }

                    for (let i = pageInfo.maxpage-2; i <= pageInfo.maxpage; i++) {
                        pageDoms += `<span class="page-btn-page ${i == pageInfo.page ? 'page-active-page' : ''}" data-id="${i}">${i}</span>`
                    }
                }else{ //中间
                    console.log('中间');
                    pageDoms += `<span class="page-btn-page" data-id="1">1</span>`
                    if(pageInfo.page-2 != 1){
                        pageDoms += `<span class="page-btn-page btn-page-elp" data-id="more">...</span>`
                    }
                    pageDoms += `<span class="page-btn-page" data-id="${pageInfo.page-1}">${pageInfo.page-1}</span>`
                    pageDoms += `<span class="page-btn-page page-active-page" data-id="${pageInfo.page}">${pageInfo.page}</span>`
                    pageDoms += `<span class="page-btn-page" data-id="${pageInfo.page+1}">${pageInfo.page+1}</span>`
                    if(pageInfo.page+2 != pageInfo.maxpage){
                        pageDoms += `<span class="page-btn-page btn-page-elp" data-id="more">...</span>`
                    }
                    pageDoms += `<span class="page-btn-page" data-id="${pageInfo.maxpage}">${pageInfo.maxpage}</span>`
                }
            }
            // 中间区域[头，尾]
            // let starPage = pageInfo.page > pageInfo.showPage ? pageInfo.page - 1 : 1
            // let endPage = pageInfo.page > pageInfo.showPage ? ((pageInfo.page + pageInfo.showPage) >= pageInfo.maxpage ? pageInfo.maxpage : pageInfo.page - 1 + pageInfo.showPage) : 1 + pageInfo.showPage
            // console.log(starPage);
            // console.log(endPage);
            // // 前置数
            // if (pageInfo.page > pageInfo.showPage) {
            //     pageDoms += `
            //     <span class="page-btn-page" data-id="1">1</span>
            //     <span class="page-btn-page btn-page-elp" data-id="more">...</span>
            //     `
            // }
            // // 中间数
            // for (let i = starPage; i <= endPage; i++) {
            //     pageDoms += `<span class="page-btn-page ${i == pageInfo.page ? 'page-active-page' : ''}" data-id="${i}">${i}</span>`
            // }
            //
            // // 末尾数
            // if (pageInfo.page + pageInfo.showPage < pageInfo.maxpage) {
            //     pageDoms += `
            //     <span class="page-btn-page btn-page-elp" data-id="more">...</span>
            //     <span class="page-btn-page" data-id="${pageInfo.maxpage}">${pageInfo.maxpage}</span>
            //     `
            //
            // }
            setTimeout(() => {
                $('.page-btn-pages').append(pageDoms)
                bindPages()
            }, 500);

        }

        initPages()
        initPageFunc()
    })
</script>

</html>